<template>
    <div class="ve_container">
        <!-- 搜索 -->
        <el-form ref="queryForm" :inline="true">
            <el-form-item label="姓名">
                <el-input placeholder="请输入用户名" v-model="username" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSearch"> 查询 </el-button>
                <el-button @click="resetSearchForm"> 重置 </el-button>
            </el-form-item>
        </el-form>
        <!-- <el-button style="margin-bottom: 10px" type="primary" @click="showAdd">
            新增用户
        </el-button> -->
        <div class="table-content">
            <el-table :data="tableData" border style="width: 100%">
                <el-table-column prop="id" label="用户ID" width="180" />
                <el-table-column prop="name" label="用户名" width="180" />
                <el-table-column prop="mobile" label="手机号码" width="180" />
                <el-table-column prop="password" label="密码" width="180" />
                <el-table-column prop="rule" label="角色">
                    <template #default="scope">
                        <span>{{
                            scope.row.type === 1 ? '管理员' : '普通用户'
                        }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="status" label="操作">
                    <template #default="scope">
                        <el-button
                            size="small"
                            type="primary"
                            @click="updateType(scope.row)"
                            >修改角色</el-button
                        >
                        <el-button
                            size="small"
                            type="primary"
                            @click="handleEdit(scope.row)"
                            >收藏游戏</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination-box">
                <el-pagination
                    background
                    layout="prev, pager, next"
                    @current-change="changePage"
                    :total="total"
                />
            </div>
        </div>

        <!-- 收藏游戏弹窗 -->
        <el-dialog v-model="dialogFormVisible" :title="dialogTitle" width="70%">
            <el-table :data="gridData">
                <el-table-column prop="userId" label="用户ID" width="150" />
                <el-table-column prop="gameName" label="游戏名称" width="150" />
                <el-table-column
                    prop="createTime"
                    label="收藏时间"
                    width="200"
                />
            </el-table>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogFormVisible = false"
                        >取消</el-button
                    >
                    <el-button type="primary" @click="handleConfirm">
                        确定
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>
<script setup>
import { ElMessageBox, ElMessage } from 'element-plus'
import { ref, onMounted } from 'vue'
import { format } from '@/utils'
import { getTuserGameList, getTuserInfoList, updateUserType } from '@/api/game'
const queryForm = ref(null)
const gridData = ref([])
const tableData = ref([])
const page = ref(1)
const size = ref(20)
const total = ref(0)
const username = ref('')
const userId = ref('')
const userFormRef = ref(null)

const dialogTitle = ref('收藏游戏')
const dialogFormVisible = ref(false)
const userForm = ref({
    name: '',
    password: '',
    apwd: '',
    id: '',
    imgUrl: '',
    user_id: '',
    status: 1,
    sex: 1,
    phone: '',
    address: ''
})
let isAdd = true
const resetSearchForm = () => {
    username.value = ''
    page.value = 1
    getDataList()
}
const onSearch = () => {
    if (!username.value && !userId.value) {
        ElMessage.warning('请输入内容再查询')
        return
    }
    page.value = 1
    getDataList()
}

const resetFormData = (title = '新增用户', off = true) => {
    dialogFormVisible.value = off
    dialogTitle.value = title
    userForm.value = {
        name: '',
        password: '',
        apwd: '',
        id: '',
        imgUrl: '',
        user_id: '',
        status: 1,
        sex: 1,
        phone: '',
        address: ''
    }
    userFormRef.value && userFormRef.value.resetFields()
}
const showAdd = () => {
    isAdd = true
    dialogFormVisible.value = true
    dialogTitle.value = '新增用户'
    userForm.value = {
        name: '',
        password: '',
        apwd: '',
        id: '',
        imgUrl: '',
        user_id: '',
        status: 1,
        sex: 1,
        phone: '',
        address: ''
    }
}
const handleConfirm = () => {
    userFormRef.value.validate(async (valid, fields) => {
        if (valid) {
            let data = null
            if (isAdd) {
                data = await aceRegister({
                    name: userForm.value.name,
                    password: userForm.value.password,
                    status: userForm.value.status,
                    avatar_url: userForm.value.imgUrl,
                    sex: userForm.value.sex,
                    phone: userForm.value.phone,
                    address: userForm.value.address
                })
            } else {
                data = await updateUser({
                    name: userForm.value.name,
                    password: userForm.value.password,
                    id: userForm.value.id,
                    status: userForm.value.status,
                    avatar_url: userForm.value.imgUrl,
                    user_id: userForm.value.user_id,
                    sex: userForm.value.sex,
                    phone: userForm.value.phone,
                    address: userForm.value.address
                })
            }
            if (data && !data.code) {
                ElMessage.success(`${dialogTitle.value}成功`)
                resetFormData('', false)
                page.value = 1
                getDataList()
            }
        } else {
            console.log('error submit!', fields)
        }
    })
}
const updateType = ({ id, type }) => {
    ElMessageBox({
        title: '提示',
        message: `是否将这个角色变成${type === 1 ? '普通用户' : '管理员'}?`,
        type: 'warning',
        showCancelButton: true
    }).then(() => {
        updateUserType({ id, type: type === 1 ? 0 : 1 }).then((res) => {
            console.log('delGameType: ', res)
            ElMessage.success('修改角色成功！')
            resetSearchForm()
        })
    })
}
/**
 * @description:添加or编辑事件
 * @param {*}
 * @return {*}
 */
const handleEdit = async ({ id }) => {
    const res = await getTuserGameList({ userId: id, pageNo: 1, size: 100 })
    console.log(res, 'getTuserGameList')
    const list = res.data.records || []
    list.forEach((r) => {
        if (r.createTime) {
            r.createTime = format(r.createTime)
        }
    })
    gridData.value = list
    dialogFormVisible.value = true
}

/**
 * @description: 获取列表数据
 * @param {*}
 * @return {*}
 */
const getDataList = async () => {
    const opt = {
        pageNo: page.value,
        size: size.value,
        name: username.value
    }
    const { code, data } = await getTuserInfoList(opt)
    console.log('getTuserInfoList: ', data)
    if (!code) {
        size.value = data.size
        page.value = data.page
        total.value = data.total
        tableData.value = data.records
    }
}

const changePage = (pageNum) => {
    page.value = pageNum
    getDataList()
}

onMounted(async () => {
    // await getRoleList();
    await getDataList()
    // maxHeight(pagination, queryForm, toolBar, ve_max_height);
})
</script>
<style>
.user-avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.user-avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.user-avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 140px;
    height: 140px;
    text-align: center;
}
</style>
<style lang="scss" scoped>
.pagination-box {
    padding-left: 50px;
    margin-top: 20px;
}
.avatar-uploader .avatar {
    width: 140px;
    height: 140px;
    display: block;
}
</style>
